<template>
	<div class="setting-question">
		<el-dialog title="设置反问意图点" :visible.sync="dialogTableVisible" :before-close="handleClose" class="setting-question" append-to-body>
			<el-table ref="tableData" :style="showDetail ? 'pointer-events: none;' : ''" :data="questionData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" class="add" :selectable="selectable" width="40" align="center"> </el-table-column>
				<el-table-column property="name" label="意图点" width="150" align="center"></el-table-column>
				<el-table-column property="reply" label="AI坐席回复话术" width="auto" align="center"></el-table-column>
			</el-table>
			<div class="page">
				<PageSzie :pages="pages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
			</div>
			<div class="btn" v-if="!showDetail">
				<el-button class="reset-btn" @click="handleClose">取消</el-button>
				<el-button class="save-btn" @click="saveSelectQuestion">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import PageSzie from '@/views/components/PageSize.vue';
export default {
	data() {
		return {
			multipleTable: []
		};
	},
	components: {
		PageSzie
	},
	props: {
		dialogTableVisible: {
			type: Boolean,
			default: () => false
		},
		questionData: {
			type: Array,
			default: () => []
		},
		pages: {
			type: Object,
			required: true,
			default: () => {}
		},
		selectedReply: {
			type: Array,
			default: () => []
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		}
	},
	mounted() {
		console.log(this.showDetail);
		this.$nextTick(() => {
			console.log(this.$refs.tableData);
		});
	},
	methods: {
		handleClose() {
			this.$emit('close');
		},
		selectable(row) {
			if (row.reply === '') {
				return false;
			}
			return true;
		},
		handleSelectionChange(val) {
			console.log(val, 'handleSelectionChangeL:');
			this.multipleTable = val.map(item => ({ name: item.name, reply: item.reply, variables: item.variables }));
		},
		saveSelectQuestion() {
			if (this.multipleTable.length === 0) {
				this.$message.error('请选择一个意图点');
			} else {
				this.$emit('saveSelectQuestion', this.multipleTable);
			}
		},
		changePageSize(val) {
			this.$emit('changePageSize', val);
		},
		changeCurrentPage(val) {
			this.$emit('changeCurrentPage', val);
		}
	}
};
</script>

<style lang="less" scoped>
.setting-question {
	.page {
		padding: 10px 0;
	}
	.disable {
		pointer-events: none;
	}
	.btn {
		text-align: right;
		padding: 12px 0;
	}
	.reset-btn {
		color: #999;
	}
	.save-btn {
		color: #fff;
		background-color: #6384fe;
	}
}
</style>

<style lang="less">
.setting-question {
	.has-gutter tr th {
		background: #f8f8f9;
	}
	.el-table--border {
		border-bottom: 1px solid #eff7fc;
	}
	tr td {
		height: 40px;
		background-color: #fff;
		cursor: pointer;
		padding: 0;
	}
	.el-table--striped .el-table__body tr.el-table__row--striped td {
		background-color: #fff;
	}
	.el-table--enable-row-hover .el-table__body tr:hover > td {
		background-color: #eff7fc;
	}
	.el-table__header-wrapper label {
		display: none;
	}
}
</style>
